<template>
  <div class="main">
    <el-card>
      <el-table border style="width: 100%" :data="records" v-loading="loading">
        <el-table-column type="index" label="序号" width="80px" align="center">
        </el-table-column>
        <el-table-column prop="skuName" label="名称" width="width">
        </el-table-column>
        <el-table-column prop="skuDesc" label="描述" width="width">
        </el-table-column>
        <el-table-column
          prop="prop"
          align="center"
          label="默认图片"
          width="140px"
        >
          <template slot-scope="{ row }">
            <img :src="row.skuDefaultImg" style="width: 120px" />
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量" width="80px">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80px">
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="width">
          <template slot-scope="{ row }">
            <el-button
              type="success"
              icon="el-icon-bottom"
              size="mini"
              v-if="row.isSale == 0"
              @click="onSale(row.id, row.isSale)"
            ></el-button>
            <el-button
              type=""
              icon="el-icon-top"
              size="mini"
              @click="onSale(row.id, row.isSale)"
              v-else
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
            <el-button
              type="info"
              icon="el-icon-info"
              size="mini"
              @click="openDrawer(row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-drawer :visible.sync="drawer" :direction="direction">
        <el-row>
          <el-col :span="5">名称</el-col>
          <el-col :span="15">{{ this.skuInfo.skuName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">描述</el-col>
          <el-col :span="15">{{ this.skuInfo.skuDesc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">价格</el-col>
          <el-col :span="15">{{ this.skuInfo.price }}元</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">平台属性</el-col>
          <el-col :span="15">
            <el-tag
              type="success"
              v-for="attr in this.skuInfo.skuAttrValueList"
              :key="attr.id"
              >{{ attr.id }}-{{ attr.valueName }}</el-tag
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">商品图片</el-col>
          <el-col :span="15">
            <el-carousel height="250px">
              <el-carousel-item
                v-for="item in this.skuInfo.skuImageList"
                :key="item.id"
              >
                <img :src="item.imgUrl" width="100%" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-drawer>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        align="center"
        :current-page="page"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="size"
        layout=" prev, pager, next, jumper,->,total, sizes"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Sku",
  data() {
    return {
      page: 1,
      size: 5,
      total: 0,
      records: [],
      loading: true,
      drawer: false,
      direction: "rtl",
      skuInfo: "",
    };
  },
  mounted() {
    this.initLoad();
  },
  methods: {
    //分页大小改变
    handleSizeChange(val) {
      this.loading = true;
      this.size = val;
      this.initLoad();
    },
    //分页当前页改变
    handleCurrentChange(val) {
      this.loading = true;
      this.page = val;
      this.initLoad();
    },

    //初始化加载sku列表
    async initLoad() {
      let result = await this.$api.default.sku.getSkuList(this.page, this.size);
      if (result.code == 200) {
        let { total, records } = result.data;
        this.total = total;
        this.records = records;
        this.loading = false;
      }
    },

    //上架 || 下架
    async onSale(spuId, sale) {
      if (sale == 0) {
        let result = await this.$api.default.sku.onSale(spuId);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: "上架成功!",
          });
          this.initLoad();
        } else {
          this.$message({
            type: "danger",
            message: "上架失败!",
          });
        }
      } else {
        let result = await this.$api.default.sku.cancelSale(spuId);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: "下架成功!",
          });
          this.initLoad();
        } else {
          this.$message({
            type: "danger",
            message: "下架失败!",
          });
        }
      }
    },

    //打开详情页面
    async openDrawer(id) {
      this.drawer = true;
      let result = await this.$api.default.sku.getSkuById(id);
      console.log(result);
      if (result.code == 200) {
        this.skuInfo = result.data;
      }
    },
  },
};
</script>

<style>
.main {
  padding: 20px;
}
.el-card {
  margin-top: 5px;
}
.el-table {
  margin-top: 5px;
}
.el-row .el-col-5 {
  font-size: 18px;
  text-align: right;
}
.el-col {
  margin: 10px 10px;
  font-size: 15px;
}
.el-col .el-tag {
  margin-right: 5px;
  margin-bottom: 3px;
}
</style>
